<script setup>
import { ref } from 'vue'
// import ChannelSelect from '@/views/article/components/ChannelSelect.vue'
import { dayjs } from 'element-plus'
import request from '@/utils/request'

//定义请求参数对象
const params = ref({
  // 第一页
  pagenum: 1,
  // 每页5条
  pagesize: 10,
  cate_id: '',
  name: '',
  work_month_value: dayjs().format('YYYY-MM')
})
//员工列表
const articleList = ref([])
const getArticleList = async () => {
  request
    .post('/employee/page', {
      organizationId: '',
      pageQuery: {
        limit: 99999,
        page: 1
      },
      searchName: ''
    })
    .then((res) => {
      articleList.value = res.data
    })
}
getArticleList()

//每月任务量数组
const TaskAmountList = ref([])
const total = ref(0) // 总条数
//请求任务量接口
const getTaskAmountmothods = () => {
  request({
    url: '/punchingCardRecord/getList',
    method: 'get',
    params: {
      month: dayjs(params.value.work_month_value).format('MM'),
      userId: params.value.name,
      year: dayjs(params.value.work_month_value).format('YYYY')
    }
  })
    .then((res) => {
      console.log('res', res)
      TaskAmountList.value = res.data
      total.value = res.total
    })
    .catch(() => {})
}
getTaskAmountmothods()

// 处理分页逻辑
const onSizeChange = (size) => {
  // 每页条数变化了，正在访问的当前页意义不大，数据不在原来那一页
  //从第一页渲染即可
  params.value.pagenum = 1
  //更改每页条数
  params.value.pagesize = size
  getTaskAmountmothods()
}
//更新当前页
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getTaskAmountmothods()
}

// 查看弹窗
// const see_workload_dialog = ref()
// 编辑
// const onCheckWorkAmount = (row, time) => {
//   let data = {
//     ...row,
//     time: time
//   }
//   see_workload_dialog.value.open(data)
// }

// 修改 确认 弹窗
// const confirm_modify_dialog = ref()
// 打开编辑弹窗
// const onConfirmModifyWay = (row, type) => {
//   let data = {
//     ...row,
//     type: type
//   }
//   confirm_modify_dialog.value.open(data)
// }
// 回显刷新
// const onSuccess = () => {
//   getTaskAmountmothods()
// }
const query = () => {
  getTaskAmountmothods()
}
const onReset = () => {
  params.value.pagenum = 1
  params.value.name = ''
  params.value.work_month_value = dayjs().format('YYYY-MM')
  getTaskAmountmothods()
}
</script>
<template>
  <page-container title="考勤管理">
    <!-- 具名插槽写按钮 -->
    <template #extra>
      <!-- <el-button type="primary" > 添加任务 </el-button> -->
      <!-- <el-button type="primary" > 一键评级 </el-button> -->
    </template>
    <!-- 表单区域 inline：在一行中显示-->
    <el-form inline>
      <!-- el-form-item 一行 -->
      <el-form-item label="姓名：">
        <!-- 下拉菜单和上面 params 绑定 -->
        <el-select v-model="params.name" filterable style="width: 240px">
          <el-option
            v-for="item in articleList"
            :key="item.id"
            :label="item.userName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="部门：">
        <channel-select style="width: 240px" v-model="params.cate_id"></channel-select>
      </el-form-item> -->
      <el-form-item label="月份：">
        <el-date-picker
          v-model="params.work_month_value"
          :editable="false"
          :clearable="false"
          type="month"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="query" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="TaskAmountList" style="width: 100%" height="550">
      <!-- 作用域插槽，可以自己拿到想要的数据 -->
      <el-table-column label="员工姓名" width="200">
        <template #default="{ row }">
          <!-- el-link 链接效果 -->
          <el-link type="primary" :underline="false">{{
            row.userName
          }}</el-link>
        </template>
      </el-table-column>
      <!-- <el-table-column label="部门" prop="cate_name"></el-table-column> -->
      <el-table-column label="时间" prop="punchCardDate"></el-table-column>
      <el-table-column label="状态" prop="punchCardState"></el-table-column>
      <el-table-column label="打卡时间" prop="clockIn">
        <template #default="{ row }">
          <span v-if="row.punchCardState == '正常'">{{
            dayjs(row.clockIn).format('YYYY-MM-DD HH:mm:ss')
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="打卡地点" prop="address"></el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[10, 20, 50, 100]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 25px; justify-content: flex-end"
    />
  </page-container>
</template>
<style lang="scss" scoped></style>
